<template>
    <div class="cesium-popup" ref="popupRef" v-show="show">
        <div class="pop-content">
            <slot></slot>
        </div>
        <div class="pop-arrow">
            <span class="pop-arrow-content" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Popup } from 'cesium-extends'
import { onBeforeUnmount, watch } from 'vue'
import { onMounted, ref } from 'vue'
// import { Viewer } from 'cesium';

// const viewer = new Viewer('cesiumContainer');

// const popup = new Popup(viewer, options);

// // 更新弹窗的位置
// popup.position = [121, 31, 0];

// // 销毁弹窗
// popup.destroy();

const popupRef = ref<HTMLElement>()

interface Props {
    map: Cesium.Viewer | null
    postion: [number, number, number]
    offset: number[]
    show: boolean
}

const props = withDefaults(defineProps<Props>(), {
    map: null,
    postion: () => [120, 30, 0],
    offset: () => [10, 10],
    show: true,
})

let popup: Popup

onMounted(() => {
    const viewer = props.map

    const options = {
        position: props.postion,
        element: popupRef.value,
        offset: props.offset,
    }

    if (!viewer) {
        return console.warn('init popup unsuccess')
    }

    popup = new Popup(viewer as any, options)

    popup.switchElementShow(props.show)
})

watch(
    () => props.postion,
    (nv, ov) => {
        if (nv) {
            popup.position = nv!
            popup.setPosition()
        }
    },
)

onBeforeUnmount(() => {
    popup.destroy()
})
</script>

<style lang="scss" scoped>
.cesium-popup {
    position: absolute;
    z-index: 10;
    min-width: 30px;
    min-height: 32px;
    padding: 6px 8px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    word-wrap: break-word;
    background: rgba(43, 44, 47, 0.8);
    border-radius: 2px;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
        0 9px 28px 8px #0000000d;

    .pop-content {
        min-width: 200px;
        max-width: 400px;
        min-height: 100px;
        max-height: 200px;
        overflow: hidden;
    }
    .pop-arrow {
        position: absolute;
        left: 50%;
        display: block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        background: 0 0;
        transform: translate(-50%, 6px);
        pointer-events: none;
        .pop-arrow-content {
            position: absolute;
            display: block;
            width: 11.3137085px;
            height: 11.3137085px;
            margin: auto;
            background-color: #000000bf;
            border-radius: 0 0 2px;
            box-shadow: 3px 3px 7px #00000012;
            transform: translateY(-8px) rotate(45deg);
            content: '';
            pointer-events: auto;
            pointer-events: none;
            inset: 0;
        }
    }
}
</style>
